<script setup lang="ts">
import { ref } from 'vue'
import { NGrid, NGi, NFlex, NCarousel, NCard, NTabs, NTabPane, NForm, NFormItem, NButton, NInput, NCheckbox, NSpace, NQrCode, NA } from 'naive-ui'


const videoRef = ref<HTMLElement[]>([])


const formRef = ref(null)
const formValue = ref({
  user: {
    name: '',
    age: ''
  },
  phone: ''
})

const rules = ref({
  user: {
    name: {
      required: true,
      message: '请输入姓名',
      trigger: 'blur'
    },
    age: {
      required: true,
      message: '请输入年龄',
      trigger: ['input', 'blur']
    }
  },
  phone: {
    required: true,
    message: '请输入电话号码',
    trigger: ['input']
  }
})

function handleValidateClick(e: MouseEvent) {
  // e.preventDefault()
  // formRef.value?.validate((errors) => {
  //   if (!errors) {
  //     // message.success('Valid')
  //   }
  //   else {
  //     console.log(errors)
  //     // message.error('Invalid')
  //   }
  // })
} 
function callCamera () {
      // H5调用电脑摄像头API
      // navigator.mediaDevices.getUserMedia({
      //   video: true
      // }).then(success => {
      //   console.log(success,videoRef.value);
      //   // 摄像头开启成功
      //   videoRef.value.srcObject = success
      //   // 实时拍照效果
      //   videoRef.value.play()
      // }).catch(error => {
      //   console.error('摄像头开启失败，请检查摄像头是否可用！')
      // })
    }   
</script>
<template>
  <n-grid y-gap="0" :cols="24" style="gap:0" class="login">
    <n-gi class="left" span="14">
      <n-flex>
        <n-carousel autoplay show-arrow style="min-width: 450px;">
          <img class="carousel-img" src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg">
          <img class="carousel-img" src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg">
          <img class="carousel-img" src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg">
          <img class="carousel-img" src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg">
        </n-carousel>
      </n-flex>
    </n-gi>
    <n-gi class="right" span="10">
      <!-- <div style="background-color: blue;"> -->
      <div class="right_login_box">
        <div style="font-size: xx-large;text-align: center;font-weight: 600;">
          欢迎登录
        </div>
        <n-tabs default-value="oasis" justify-content="space-evenly" type="line" style="padding: 0 30px;">
          <n-tab-pane name="oasis" tab="微信登录">
            <div style="text-align: center;margin-top:20px">
              <img src="../../assets/image/erweima.png" alt="" srcset="" style="width: 350px;height:350px">
              <!-- <div>
              登录即同意用户协议及内容管理规范
            </div> -->
            </div>
          </n-tab-pane>
          <n-tab-pane name="the beatles" tab="人脸登录">
            <div>
              <n-button type="primary" @click="callCamera" class="photoBtn">拍照登录</n-button>
              <!-- 人脸登录 -->
              <video ref="videoRef" autoplay width="500" height="480" ></video>
              
              <!-- canvas展示拍的照片 -->
              <!-- <canvas ref="canvasRef" style="display: none"></canvas> border: solid 1px brown;-->
            </div>
          </n-tab-pane>
          <n-tab-pane name="jay chou" tab="账号登录">
            <div style="margin-top:20px">
              <n-form ref="formRef" label-placement="left" label-width="80" :model="formValue" :rules="rules">
                <n-form-item label="用户名" path="user.name">
                  <n-input v-model:value="formValue.user.name" placeholder="输入用户名" />
                </n-form-item>
                <n-form-item label="密码" path="user.age">
                  <n-input v-model:value="formValue.user.age" placeholder="输入密码" />
                </n-form-item>
                <n-form-item>

                  <div style="width: 100%;padding: 0 80px;display: flex;justify-content: space-between;">
                    <n-checkbox>
                      记住我
                    </n-checkbox>
                    <n-a>忘记密码</n-a>
                  </div>
                </n-form-item>
                <n-form-item>
                  <div style="width: 100%;padding: 0 80px;display: flex;justify-content: space-between;">
                    <n-button type="primary" attr-type="button" @click="handleValidateClick">
                      登录
                    </n-button>
                    <n-button attr-type="button" s>
                      注册
                    </n-button>
                  </div>
                </n-form-item>
              </n-form>
            </div>
          </n-tab-pane>
        </n-tabs>
      </div>

    </n-gi>
  </n-grid>
</template>

<style lang="scss" scoped>
.carousel-img {

  width: 100%;
  height: 100%;
  object-fit: cover;
}

.login {
  height: 100vh;
}

.left {
  /** background-color: aqua; */
  display: flex;
  padding: 20px;
}

.left_box {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.right {
  /** background-color: rgb(78, 105, 105); */
  display: flex;
  padding: 20px;
}

.right_login_box {
  min-width: 400px;
  width: 80%;
  height: 100%;
  border: solid 1px black;
  border-radius: 20px;
  padding: 20px 0;
}
</style>